<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>BlueShoes JavaScript Button: Example 6</title>
<style>
body {
	font-family: arial, helvetica;
	font-size:   12px;
}
</style>
<script>
function bs_isGecko() {
  //rather poor implementation.
  if (navigator.appName == "Microsoft Internet Explorer") return false;
  return (navigator.userAgent.match(/gecko/i));
}
if (bs_isGecko()) {
  document.writeln("<link rel='stylesheet' href='/_bsJavascript/components/toolbar/win2k_mz.css'>");
} else {
  document.writeln("<link rel='stylesheet' href='/_bsJavascript/components/toolbar/win2k_ie.css'>");
}
</script>
<script type="text/javascript" src="/_bsJavascript/components/toolbar/Bs_ButtonBar.class.js"></script>
<script type="text/javascript" src="/_bsJavascript/components/toolbar/Bs_Button.class.js"></script>
<script type="text/javascript" src="/_bsJavascript/core/lang/Bs_Misc.lib.js"></script>
<script>
function btnClicked(btnObj) {
	var logLine = 'Clicked the button: ';
	if ((typeof(btnObj.title) != 'undefined') && (btnObj.title != '')) {
		logLine += btnObj.title;
	} else {
		logLine += btnObj.caption;
	}
	var elm = document.getElementById('buttonLog');
	elm.value = logLine + "\n" + elm.value;
}

function go() {
  bar = new Bs_ButtonBar();
  bar.useHelpBar = true;
  
  b1 = new Bs_Button();
  b1.title = 'New';
  b1.imgName = 'bs_new';
  b1.attachEvent(btnClicked);
  bar.addButton(b1, 'Create a new document.');
	
	barAlignment = new Bs_ButtonBar();
	barAlignment.alignment = 'vert';
	
  b4 = new Bs_Button();
  b4.title      = '';
	b4.caption    = 'Align left';
  b4.imgName    = 'bs_alignLeft';
  b4.attachEvent(btnClicked);
  barAlignment.addButton(b4);
	
  b5 = new Bs_Button();
  b5.title      = '';
	b5.caption    = 'Align center';
  b5.imgName    = 'bs_alignCenter';
  b5.attachEvent(btnClicked);
  barAlignment.addButton(b5);
  
  b6 = new Bs_Button();
  b6.title      = '';
	b6.caption    = 'Align right';
  b6.imgName    = 'bs_alignRight';
  b6.attachEvent(btnClicked);
  barAlignment.addButton(b6);
	
  b2 = new Bs_Button();
  b2.title                 = 'Align';
  b2.imgName               = 'bs_alignLeft';
	b2.actualizeFromChildren = 1;
	b2.setChildrenButtonBar(barAlignment);
  bar.addButton(b2, 'Align the text...');
		
  bar.drawInto('buttonBar');
}
</script>
</head>
<body bgcolor="white" onLoad="go();">

<h1>JavaScript Toolbar Example 6</h1>

Features used:
<ul>
  <li>domonstration of a "multiple choice" button.</li>
	<li>technically, it is a button that uses a children toolbar with its own buttons.</li>
	<li>a click on a child button updates the parent icon. this is an option.</li>
</ul>

Move your mouse over the buttons, and click them.
<hr>
<br>

<div id="buttonBar"></div>
<br><br><br><br><br><br>

<form>
<textarea cols="50" rows="10" name="buttonLog" id="buttonLog" wrap="off"></textarea>
</form>

</body>
</html>
